<template>
  <el-button type="primary" @click="visible = true">编辑</el-button>
  <div v-loading="status.page" style="margin-top: 10px; height: 30vh; background-color: rgba(0, 0, 0, 0.3)"></div>
  <el-dialog v-model="visible" title="编辑">
    <div style="text-align: center">
      <el-button type="primary" :loading="status.button" @click="handleSaveBtn">保存</el-button>
    </div>
  </el-dialog>
  <slot :html="html" />
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";

import { ElButton, ElDialog } from "element-plus";

import { getAllTranslationHeadApi } from "../../../../../api/modules/sysManage/translation";

const html = ref(`
<template>
  <el-button type="primary" @click="visible = true">编辑</el-button>
  <div v-loading="status.page" style="margin-top: 10px; height: 30vh; background-color: rgba(0, 0, 0, 0.3)"></div>
  <el-dialog v-model="visible" title="编辑">
    <div style="text-align: center">
      <el-button type="primary" :loading="status.button" @click="handleSaveBtn">保存</el-button>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";

import { ElButton, ElDialog } from "element-plus";

import { getAllTranslationHeadApi } from "../../../../../api/modules/sysManage/translation";

const visible = ref(false);

const status = reactive({
  page: false,
  button: false
});

// 获取页面数据
const queryData = async () => {
  // 真实接口案例
  status.page = true;
  const res = await getAllTranslationHeadApi({} as FormData);
  status.page = false;
  return res.data;
};
// 保存数据
const handleSave = () => {
  return new Promise(resolve => {
    status.button = true;
    setTimeout(() => {
      status.button = false;
      resolve({});
    }, 1000);
  });
};

// 保存按钮
const handleSaveBtn = async () => {
  // 调用保存接口
  await handleSave();
  // 关闭模态框
  visible.value = false;
  // 刷新页面
  await queryData();
};

onMounted(() => queryData());
<\/script>
`);

const visible = ref(false);

const status = reactive({
  page: false,
  button: false
});

// 获取页面数据
const queryData = async () => {
  // 真实接口案例
  status.page = true;
  const res = await getAllTranslationHeadApi({} as FormData);
  status.page = false;
  return res.data;
};
// 保存数据
const handleSave = () => {
  return new Promise(resolve => {
    status.button = true;
    setTimeout(() => {
      status.button = false;
      resolve({});
    }, 1000);
  });
};

// 保存按钮
const handleSaveBtn = async () => {
  // 调用保存接口
  await handleSave();
  // 关闭模态框
  visible.value = false;
  // 刷新页面
  await queryData();
};

onMounted(() => queryData());
</script>
